<template>
  <div class="container" v-if="show">
    <div class="spinner">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script setup>
  import { globalStore } from '@/store/global.js'
  import { ref, watch } from 'vue'

  const useGlobalStore = globalStore()
  const show = ref(false)

  watch(
    () => useGlobalStore.showLoading,
    (newVal) => {
      // console.log(newVal);
      if (newVal) {
        show.value = true
      } else {
        show.value = false
      }
    }
  )
</script>

<style lang="scss" scoped>
  .container {
    height: 100vh;
    width: 100vw;
    background-color: white;
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
  }

  .spinner {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 2em;
    position: relative;
    z-index: 999;
    opacity: 1;
  }

  span {
    width: 0.3em;
    height: 1em;
    background-color: $my-wzut-icon-primary;
  }

  span:nth-of-type(1) {
    animation: grow 1s -0.45s ease-in-out infinite;
  }

  span:nth-of-type(2) {
    animation: grow 1s -0.3s ease-in-out infinite;
  }

  span:nth-of-type(3) {
    animation: grow 1s -0.15s ease-in-out infinite;
  }

  span:nth-of-type(4) {
    animation: grow 1s ease-in-out infinite;
  }

  @keyframes grow {
    0%,
    100% {
      transform: scaleY(1);
    }

    50% {
      transform: scaleY(2);
    }
  }
</style>
